<template>
	<div style="margin: 10px;">
		<u-row justify="center">
			<u--image src="/static/image/logo.png" height="300px"/>
		</u-row>
		<u--form 
				labelPosition="left"
				:model="loginForm"				
				ref="form1" >
			<!-- 输入账号（用户名） -->
			<u-form-item label="账号" borderBottom >
				<u--input
					placeholder="请输入账号"
					v-model="loginForm.name"
					border="none"
				></u--input>
			</u-form-item>
			<!-- 输入密码 -->
			<u-form-item label="密码" borderBottom>
				<u--input
					type="password"
					placeholder="请输入密码"
					v-model="loginForm.password"
					border="none"
				></u--input>
			</u-form-item>

			<!-- 登录按钮 -->
			<u-button style="margin-top: 10px;" type="primary" size="large" @click="onClickLogin">登录</u-button>

			<!-- 注册按钮 -->
			<u-button style="margin-top: 10px;" type="info" size="large" @click="onClickRegister">如果没有账号，请立即注册</u-button>
		</u--form>
	</div>
</template>

<script>
	import * as UserAPI from "@/api/user.js" //导入登录接口
	import {
		getStorageUser,
		setStorageToken,
		setStorageUser,
	} from "@/utils/storage.js" //导入本地存储方法
	export default {
		name: "login",
		data() {
			return {
				loginForm: {
					name: "dingding", //用户名，仅仅测试方便
					password: "123456",
				},
				redirectPath:"",
			}
		},

		//生命周期钩子函数，在组件DOM元素加载好了后被调用
		onLoad(options) {
			console.log(options)
			this.redirectPath = decodeURIComponent(options.redirect);			
			//初始赋值 ，从本地存储中获取用户名
			this.loginForm.name = getStorageUser().name;
		},

		methods: {
			onClickLogin() {				
				if (this.loginForm.name === "" || this.loginForm.password === "") {
					uni.$u.$toast("账号或密码不能为空");
					return;
				}

				let params = this.loginForm;
				UserAPI.login(params).then(result => {
					console.log(result);
					uni.showToast({
						title: "登录成功！",
						icon : "success"
					});
					//把返回的 user 、token 在本地保存  
					setStorageToken(result.data.token); //保存Token
					setStorageUser(result.data.user); //保存用户数据
					
					//实现路由跳转页面 看看当前路由是否指定有重定向地址 否则跳转 user
					let toUrl = this.redirectPath || "/pages/user/User";
					
					//延时1秒后路由跳转
					setTimeout(() => {						
						uni.reLaunch({
							url: toUrl,
						});
					}, 1000);
				}).catch((error) => {
					console.log(error);
				});
			},

			onClickRegister() {
				//路由跳转到用户注册页面
				// uni.$u.toast("注册，还没实现！");
				uni.$u.route("/pages/user/Register");
			}
		},
	}
</script>

<style lang="less" scoped="scoped">
	.goto {
		display: block;
		margin-top: 25px;
		text-align: center;
	}
</style>
